<template>
  <div class="nav-bar">
    <div class="nav-bar-content">
      <div class="left">
        <template v-if="getIsInHome">
          <a-month-picker
            :default-value="moment('2020-11', monthFormat)"
            :format="monthFormat"
            size="large"
            @change="selTime"
          />
        </template>
        <template v-else>
          <a-button @click="routerGoBack">返回</a-button>
        </template>
      </div>
      <div class="center">{{ $store.getters.getProjectTitle }}</div>
      <div class="right">
        <div>
          <a-avatar class="user-icon" icon="user" />
          <span class="nav-user-name">admin</span>
        </div>
        <div class="nav-change-sys">
          <div
            v-for="(item, index) in rigBtns"
            :key="index"
            class="nav-change-sys-item"
          >
            <a-avatar
              :src="item.img"
              class="change-sys-btn"
              shape="square"
              icon="user"
            />
            <div class="item-label">{{ item.label }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import moment from 'moment';
export default {
  data() {
    return {
      'rigBtns': [
        { 'label': '分析', 'img': require('@/assets/img/nav/fx.png') },
        { 'label': '报表', 'img': require('@/assets/img/nav/bb.png') },
        { 'label': '业务', 'img': require('@/assets/img/nav/yw.png') }
      ],
      'monthFormat': 'YYYY-MM',
      'selMonth': null
    };
  },
  created() {},
  'methods': {
    moment,
    routerGoBack() {
      const flag = this.$router.currentRoute.path !== '/Home';
      if (flag) {
        this.$router.go(-1);
      } else if (!this.$store.getters.isXCZ) {
        return this.$store.commit('townChange', {});
      }
    },
    selTime(t, t1) {
      this.selMonth = t1;
      this.$emit('time-change', t1);
    }
  },
  'computed': {
    getIsInHome() {
      const path = this.$router.currentRoute.path;
      if (path === '/Home' && !this.$store.getters.isXCZ) {
        return false;
      }
      return path === '/Home';
    }
  },
  'components': {}
};
</script>

<style lang="scss" scoped>
.nav-bar {
  height: 88px;
  background: #ffffff;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
  .nav-bar-content {
    padding: 0 12px;
    width: 100%;
    height: 100%;
    position: relative;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.left {
  /deep/ .ant-btn {
    color: #81bff9;
    border-color: #81bff9;
    width: 96px;
    height: 36px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
}
.center {
  font-size: 36px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1f2e4d;
  position: relative;
  left: 66px;
}
.right {
  display: flex;
  .user-icon {
    width: 42px;
    height: 42px;
    font-size: 30px;
  }
}
.nav-user-name {
  margin-left: 6px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #1e2530;
}
.nav-change-sys {
  display: flex;
  margin-left: 40px;
}
.nav-change-sys-item {
  margin: 0 20px;
  cursor: pointer;
  .item-label {
    text-align: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #1f2e4d;
  }
  .change-sys-btn {
    width: 24px;
    height: 24px;
  }
}
</style>
